<template>
  <h2>个人信息</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{salary}}K</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="salary++">涨薪</button>
</template>

<script>
import {reactive,toRef} from 'vue'
export default {
  name: "Demo",
  setup(){
    //数据
    let person=reactive({
      name:'张三',
      age:18,
      job:{
        j1:{
          salary:20
        }
      }
    })

    const name1=person.name
    console.log("person.name",name1)  //输出只是字符串
    const name2=toRef(person,'name')
    console.log("toRef(person,'name')",name2)    //输出指向是person的name属性的ref对象

    //返回一个对象（常用）
    return{
      name:toRef(person,'name'),
      age:toRef(person,'age'),
      salary:toRef(person.job.j1,'salary')
    }
  },
}
</script>

<style scoped>

</style>
